<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="/css/pintuer.css">
        <link rel="stylesheet" href="/css/admin.css">
        <script src="/js/jquery.js"></script>
        <script src="/js/pintuer.js"></script>
        <script src="/js/vue.js"></script>
        <script src="/js/axios.min.js"></script>
        <script src="/js/alert.js"></script>
    </head>
    <body>
        <div class="panel admin-panel" id="pass">
            <div class="panel-head"><strong><span class="icon-key"></span> 修改会员密码</strong></div>
            <div class="body-content">
                <form method="post" class="form-x" action="">
                    <div class="form-group">
                        <div class="label">
                            <label>管理员帐号：</label>
                        </div>
                        <div class="field">
                            <label style="line-height:33px;">
                                <h1><strong>{{adminAccount}}</strong></h1>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>原始密码：</label>
                        </div>
                        <div class="field">
                            <input type="password" class="input w50" id="mpass" name="mpass" size="50"
                                   placeholder="请输入原始密码" data-validate="required:请输入原始密码"/>
                        </div>
                        <p class="msg" style="color: red"></p>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>新密码：</label>
                        </div>
                        <div class="field">
                            <input type="password" class="input w50" name="newpass" id="newpass" size="30" placeholder="请输入新密码"
                                   data-validate="required:请输入新密码,length#>=5:新密码不能小于5位"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>确认新密码：</label>
                        </div>
                        <div class="field">
                            <input type="password" class="input w50" name="renewpass" id="renewpass" size="30" placeholder="请再次输入新密码"
                                   data-validate="required:请再次输入新密码,repeat#newpass:两次输入的密码不一致"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>密保问题：</label>
                        </div>
                        <select style="width:210px;font-size:20px" id="securityId">
                            <option selected="selected" value="默认值">请选择问题</option>
                            <option v-for="security in securityList" :value="security.securityId" >
                                {{security.securityQuestion}}
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>密保答案：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" id="answer" name="mpass" size="30" placeholder="请输入密保答案"
                                   data-validate="required:请输入密保答案"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label></label>
                        </div>
                        <div class="field">
                            <button class="button bg-main icon-check-square-o" type="button" v-on:click="updatePassword"> 提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script>
            var vue = new Vue({
                el:"#pass",
                data:{
                    adminId: "",
                    adminAccount:"",
                    adminInfo:{},
                    securityList:[]
                },
                methods:{
                    showId: function () {
                        let url = "/admin/showName";
                        axios.get(url)
                            .then(function (result) {
                                let adminAccount = result.data.adminAccount;
                                this.vue.adminAccount = adminAccount;
                                let adminId = result.data.adminId;
                                this.vue.adminId = adminId;
                                this.vue.showSecurityQuestion();
                            })
                            .catch();
                    },
                    showSecurityQuestion:function () {
                        let url = "/admin/showSecurityQuestion?adminId="+this.adminId;
                        axios.get(url)
                            .then(function (result) {
                                let securityList = result.data;
                                this.vue.securityList = securityList;
                            })
                            .catch();
                    },
                    updatePassword:function () {
                        let url1 = "/admin/getPassword?adminAccount="+this.adminAccount+"&adminPassword="+$("#mpass").val();
                        axios.get(url1)
                            .then(function (result) {
                                if (result.data.status==200){
                                    let updatePass = {
                                        adminId:this.vue.adminId,
                                        adminPassword:$("#newpass").val(),
                                        securityId:$("#securityId").find("option:selected").val(),
                                        securityAnswer:$("#answer").val(),
                                    };
                                    let url2 = "/admin/updatePassword";
                                    axios.put(url2,updatePass)
                                        .then(function (result) {
                                            if (result.data.status==200) {
                                                window.alert("修改成功");
                                            }else {
                                                window.alert("修改失败");
                                            }
                                        })
                                        .catch();
                                }else {
                                    $(".msg").html(result.data.msg);
                                }
                            })
                            .catch();
                    },
                },
                mounted:function () {
                    this.showId();
                }
            })
        </script>
    </body>
</html>